<!--
author: W3layouts
author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>预约寄件</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=" Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <%--jq--%>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.5.1.js" type="text/javascript"></script>
    <%--    laiui 框架--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <%--    bootstrap 框架--%>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type='text/css'>
    <%--    font-awesome 图标库--%>
    <link href="${pageContext.request.contextPath}/front/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <%--    百度地图API--%>
    <%--    <script type="text/javascript"--%>
    <%--            src="http://api.map.baidu.com/api?v=3.0&ak=lewICX42RZIlfELxB6dG81zz5W1juYc6"></script>--%>
    <%--    高德地图API--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=5702b4a78aee7e6d4704e647d45a5e5d&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation"></script>
    <%--    项目 css--%>
    <link href="${pageContext.request.contextPath}/front/css/style.css" rel="stylesheet" type="text/css"/>
    <style>
        input[type=text] {
            border-top: none;
            border-left: none;
            border-right: none;
        }

        form label {
            color: darkslategrey;
        }
    </style>
</head>
<body class="layui-bg-gray">
<!-- //header -->
<header id="header" style="z-index: 51" class="pb-2 layui-bg-cyan">
    <div class="mx-auto d-flex pt-3 w-75">
        <!-- top header -->
        <%--        <div class="d-flex pt-3">--%>
        <div id="logo" class="align-self-center">
            <h1>
                <a href="${pageContext.request.contextPath}/index.jsp" style="text-shadow: 2px 2px black">码上物流</a>
            </h1>
        </div>
        <div class="align-self-center ml-5">
            <nav class="nav pt-2">
                <ul class="mt-2">
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/about.jsp">About Us</a>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/services.html">Services</a>
                    </li>
                    <li class="mr-3 mr-2 p-0">
                        <!-- First Tier Drop Down -->
                        <label for="drop-2" class="toggle">Dropdown<span class="fa fa-angle-down"
                                                                         aria-hidden="true"></span>
                        </label>
                        <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                        <input type="checkbox" id="drop-2"/>
                        <ul class="inner-dropdown rounded">
                            <li>
                                <a href="${pageContext.request.contextPath}/front/gallery.html">Our Gallery</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/front/error.html">404 Error Page</a>
                            </li>
                            <li>
                                <a href="#">Add Link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/contact.html">Contact</a>
                    </li>
                    <li class="">
                        <a href="#subscribe">关于我们</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div id="userDiv" class="ml-auto top-grid d-flex">
<%--            <div class="d-flex w-100 p-2">--%>
<%--                <a href="javascript:void(0)" class=" align-self-end ml-auto text-white" style="color: white"--%>
<%--                   onclick="doFastLogin()">未登录</a>--%>
<%--                <a href="javascript:void(0)" class="align-self-end" onclick="doFastLogin()">--%>
<%--                    <span class="fa ml-3 fa-user-circle-o text-light"></span>--%>
<%--                </a>--%>
<%--            </div>--%>
            <%--======================================================--%>
            <%--            <nav class="nav w-100">--%>
            <%--                <ul class="w-100 nav justify-content-end">--%>
            <%--                    <li class="rounded-top ">--%>
            <%--                        <div class="d-flex p-2">--%>
            <%--                            <a class="p-0 mr-3 align-self-end text-white">名sdsssssssssssssfsdfd </a>--%>
            <%--                            <img src="front/images/manager.jpg" class="layui-circle" height="47" width="47">--%>
            <%--                        </div>--%>
            <%--                        <ul class="inner-dropdown rounded pl-2 pr-2" style="z-index: 1;width: 200px;margin-left:110px;">--%>
            <%--                            <li>--%>
            <%--                                <a href="${pageContext.request.contextPath}/front/gallery.html">个人中心</a>--%>
            <%--                            </li>--%>
            <%--                            <li>--%>
            <%--                                <a href="${pageContext.request.contextPath}/front/error.html">退出</a>--%>
            <%--                            </li>--%>
            <%--                        </ul>--%>
            <%--                    </li>--%>
            <%--                </ul>--%>
            <%--            </nav>--%>
            <%--======================================================================--%>
        </div>
        <div class="d-flex ml-3 pb-2">
            <a href="javascript:void(0)" class="city text-white align-self-end"></a>
            <a href="javascript:void(0)" onclick="detectLocation()"
               class="fa fa-2x fa-location-arrow ml-3 location-icon align-self-end"></a>
        </div>
        <%--        </div>--%>
        <!-- top header -->
        <!-- nav -->
        <!-- //nav -->
    </div>
</header>
<!-- //header -->
<!-- inner banner -->
<!-- contact -->
<%--<div class="contact layui-form" lay-filter="wholeForm">--%>
<div class="contact">
    <h2 class="heading text-center mb-3 mt-3">开始预约寄件</h2>
    <%--    步骤一面板--%>
    <div id="step1" class="formInfo w-100 layui-anim layui-anim-fadein" style="position: absolute; height: 600px;">
        <div class="w-50 mx-auto bg-white p-5 rounded shadow">
            <div class="d-flex">
                <div class="display-3 font-weight-bold text-primary mr-3 align-self-end user-select-none">01</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">02</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">03</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">04</div>
            </div>
            <div class="d-flex">
                <div>
                    <h2 class="">寄件人信息</h2>
                </div>
                <div class="align-self-end"><cite title="Source Title" class="text-black-50"> * 为必填项</cite></div>
                <div class="align-self-end ml-auto">
                    <a href="javascript:void(0)" onclick="useAddressInfo()">
                        <span class="text-black-50">使用地址簿</span>
                        <i class="fa fa-2x fa-address-book"></i></a>
                </div>
            </div>
            <div id="sendFormContainer" class="mt-3">
                <form class="layui-form" lay-filter="sendForm">
                    <input type="hidden" id="sendProvince" name="sendProvince">
                    <input type="hidden" id="sendCity" name="sendCity">
                    <input type="hidden" id="sendDistrict" name="sendDistrict">
                    <input type="hidden" id="sendLng" name="sendLng">
                    <input type="hidden" id="sendLat" name="sendLat">
                    <input type="hidden" id="sendAdCode" name="sendAdCode">
                    <input type="hidden" id="sendCityCode" name="sendCityCode">
                    <div class="layui-row mb-4">
                        <div class=" layui-col-lg4">
                            <label for="sendName">姓名<span class="text-danger">*</span></label>
                            <input type="text" id="sendName" name="sendName" placeholder="寄件人姓名" autocomplete="off"
                                   class="layui-input" lay-verify="required">
                        </div>
                        <div class=" layui-col-lg-offset4 layui-col-lg4">
                            <label for="sendCompanyName">公司名</label>
                            <input type="text" id="sendCompanyName" name="sendCompanyName" placeholder="公司名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-row mb-4">
                        <div class=" layui-col-lg4">
                            <label for="sendName">联系电话<span class="text-danger"> * </span></label>
                            <input type="text" id="sendPhone" name="sendPhone" placeholder="手机号码" autocomplete="off"
                                   class="layui-input" lay-verify="required|phone">
                        </div>
                    </div>
                    <div class="layui-row mb-4 d-flex">
                        <div class="layui-col-lg11">
                            <label for="sendAddress">省市区<span class="text-danger"> * </span></label>
                            <input type="text" id="sendAddress" name="sendAddress" placeholder="所在地区" autocomplete="off"
                                   class="layui-input" lay-verify="required">
                        </div>
                        <div class="align-self-end">
                            <a href="javascript:void(0);" onclick="selfLocation()"
                               class="fa fa-2x fa-location-arrow align-self-end"></a>
                        </div>
                    </div>
                    <div class="layui-row mb-4">
                        <div class="layui-col-lg12">
                            <label for="sendAddressDetail">详细地址<span class="text-danger"> * </span></label>
                            <input type="text" id="sendAddressDetail" name="sendAddressDetail" placeholder="所在街道以及详细地址"
                                   autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button lay-submit class="layui-btn layui-btn-normal"
                                lay-filter="sendFormSubmit">下一步
                        </button>
                    </div>
                    <!--</div>-->
                </form>
            </div>
        </div>
    </div>
    <%--    步骤二面板--%>
    <div id="step2" class="w-100 layui-anim layui-anim-fadein" style="position: absolute; height: 600px;display: none">
        <div class="w-50 mx-auto bg-white p-5 rounded shadow">
            <div class="d-flex">
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">01</div>
                <div class="display-3 font-weight-bold text-primary mr-3 align-self-end user-select-none">02</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">03</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">04</div>
            </div>
            <div class="d-flex">
                <div>
                    <h2 class="">收件人信息</h2>
                </div>
                <div class="align-self-end"><cite title="Source Title" class="text-black-50"> * 为必填项</cite></div>
            </div>
            <div id="receiveFormContainer" class=" mt-3">
                <form class="layui-form" lay-filter="receiveForm">
                    <input type="hidden" id="receiveProvince" name="receiveProvince">
                    <input type="hidden" id="receiveCity" name="receiveCity">
                    <input type="hidden" id="receiveDistrict" name="receiveDistrict">
                    <input type="hidden" id="receiveLng" name="receiveLng">
                    <input type="hidden" id="receiveLat" name="receiveLat">
                    <input type="hidden" id="receiveAdCode" name="receiveAdCode">
                    <input type="hidden" id="receiveCityCode" name="receiveCityCode">
                    <div class="layui-row mb-4">
                        <div class=" layui-col-lg4">
                            <label for="sendName">姓名<span class="text-danger">*</span></label>
                            <input type="text" id="receiveName" name="receiveName" placeholder="寄件人姓名"
                                   autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                        <div class="layui-inline layui-col-lg-offset4 layui-col-lg4">
                            <label for="receiveCompanyName">公司名</label>
                            <input type="text" id="receiveCompanyName" name="receiveCompanyName" placeholder="公司名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-row mb-4">
                        <div class=" layui-col-lg4">
                            <label for="sendName">联系电话<span class="text-danger"> * </span></label>
                            <input type="text" id="receivePhone" name="receivePhone" placeholder="手机号码"
                                   autocomplete="off" class="layui-input" lay-verify="required|phone">
                        </div>
                    </div>
                    <div class="layui-row mb-4">
                        <div class="layui-col-lg11">
                            <label for="receiveAddress">省市区<span class="text-danger"> * </span></label>
                            <input type="text" id="receiveAddress" name="receiveAddress" placeholder="所在地区"
                                   autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-row mb-4">
                        <div class="layui-col-lg12">
                            <label for="receiveAddressDetail">详细地址<span class="text-danger"> * </span></label>
                            <input type="text" id="receiveAddressDetail" name="receiveAddressDetail"
                                   placeholder="所在街道以及详细地址" autocomplete="off" class="layui-input"
                                   lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-row mb-4">
                        <div class="">
                            <input type="checkbox" class="layui-form-checkbox" name="saveToAddInfo" value="1"
                                   lay-skin="primary" title="保存到地址簿" checked>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button type="button" onclick="toStep1()" class="layui-btn layui-btn-normal">上一步</button>
                        <button lay-submit class="layui-btn layui-btn-normal"
                                lay-filter="receiveFormSubmit">下一步
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <%--    步骤三面板--%>
    <div id="step3" class="w-100 layui-anim layui-anim-fadein" style="position: absolute; height: 600px;display: none">
        <div class="w-50 mx-auto bg-white p-5 rounded shadow">
            <div class=" d-flex">
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">01</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">02</div>
                <div class="display-3 font-weight-bold text-primary mr-3 align-self-end user-select-none">03</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">04</div>
            </div>
            <div class=" d-flex">
                <div>
                    <h2 class="">预约信息</h2>
                </div>
                <div class="align-self-end"><cite title="Source Title" class="text-black-50"> * 为必填项</cite></div>
            </div>
            <div class=" mt-3">
                <form class="layui-form" lay-filter="commentForm">
                    <input type="hidden" id="cost" name="cost">
                    <input type="hidden" id="endHouseId" name="endHouseId">
                    <div class="layui-row mb-4">
                        <label class="pt-2 layui-col-lg1">揽收方式</label>
                        <div class="">
                            <input type="radio" name="method" value="1" title="快递员上门取件" checked>
                            <input type="radio" name="method" value="0" title="到仓库点自寄">
                        </div>
                    </div>
                    <div class="layui-row mb-4">
                        <div class=" layui-col-lg4">
                            <label for="typeSelect">选择包裹类型<span class="text-danger"> * </span></label>
                            <select name="typeSelect" id="typeSelect" lay-verify="required" lay-filter="typeSelect">
                            </select>
                        </div>
                        <div class="layui-col-lg-offset2 layui-col-lg2">
                            <label for="weight">重量(单位：公斤)<span class="text-danger"> * </span></label>
                            <input type="number" step="0.1" class="layui-input layui-inline" name="weight" id="weight"
                                   lay-verify="required|number" value="1" lay-filter="typeSelect"/>
                        </div>
                    </div>
                    <div class="layui-row mb-4">
                        <div class="layui-col-lg12">
                            <label for="orderComment">备注</label>
                            <input type="text" id="orderComment" name="orderComment" placeholder="捎话给快递员"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button type="button" onclick="toStep2()" class="layui-btn layui-btn-normal">上一步</button>
                        <button lay-submit class="layui-btn layui-btn-normal" lay-filter="commentFormSubmit">下一步
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <%--    步骤四面板--%>
    <div id="step4" class="w-100 layui-anim layui-anim-fadein" style="position: absolute; height: 600px;display: none">
        <div class="w-50 mx-auto bg-white p-5 rounded shadow">
            <div class=" d-flex">
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">01</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">02</div>
                <div class="display-4 font-weight-bold text-black-50 mr-3 align-self-end user-select-none">03</div>
                <div class="display-3 font-weight-bold text-primary mr-3 align-self-end user-select-none">04</div>
            </div>
            <div class=" d-flex">
                <div>
                    <h2 class="">生成订单</h2>
                </div>
                <div class="align-self-end"><cite title="Source Title" class="text-black-50">请仔细核对信息</cite></div>
            </div>
            <div class="mt-3">
                <div class="row">
                    <div id="sendDetailCard" class="col card p-0 m-3">
                        <h2 class="card-header">寄件人信息</h2>
                        <div class="card-body">
                            <%--                            <div><strong>姓名：</strong></div>--%>
                            <%--                            <div><strong>电话：</strong></div>--%>
                            <%--                            <div><strong>详细地址</strong></div>--%>
                        </div>
                    </div>
                    <div id="receiveDetailCard" class="col card p-0 m-3">
                        <h2 class="card-header">收件人信息</h2>
                        <div class="card-body">
                        </div>
                    </div>
                </div>
                <div>
                    <div id="commentCard" class="card p-0">
                        <h2 class="card-header">备注信息</h2>
                        <div class="card-body">
                            <%--                            <div><strong>包裹类型：</strong></div>--%>
                            <%--                            <div><strong>备注：</strong></div>--%>
                            <%--                            <div class="d-flex"><strong class="ml-auto">价格（具体价格以快递员称重结果为准）：</strong></div>--%>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <form id="confirmForm" class="layui-form" action="alipay.trade.page.pay.jsp"
                          lay-verify="confirmForm">
                        <input type="hidden" class="layui-input" id="WIDout_trade_no" name="WIDout_trade_no"/>
                        <input type="hidden" class="layui-input" id="WIDsubject" name="WIDsubject"/>
                        <input type="hidden" class="layui-input" id="WIDtotal_amount" name="WIDtotal_amount"/>
                        <input type="hidden" class="layui-input" id="WIDbody" name="WIDbody"/>
                        <button type="button" onclick="toStep3()" class="layui-btn layui-btn-normal">上一步</button>
                        <button lay-submit class="layui-btn layui-btn-normal" lay-filter="confirmSubmit">确定
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //contact -->
<!-- footer-top -->
<section class="footer-top py-5" style="margin-top: 700px;">
    <div class="container">
        <div class="row footer-top-grid">
            <div class="col-sm-6">
                <h3>Contact Us</h3>
                <p>Call us, we are 24/7 Helpline</p>
            </div>
            <div class="col-sm-6 text-sm-right mt-sm-0 mt-3">
                <h3><span class="fa fa-phone" aria-hidden="true"></span> +11 2345 6789</h3>
            </div>
        </div>
    </div>
</section>
<!-- //footer-top -->
<!--footer -->
<div class="footer footer_w3layouts_section_1its py-5" id="subscribe">
    <div class="container pt-sm-4">
        <div class="row footer-grid">
            <div class="col-md-5 footer-grid_section_1its_w3">
                <div class="footer-title">
                    <h3>Who we are</h3>
                </div>
                <div class="footer-text">
                    <p>Curabitur non nulla sit amet nislinit tempus ipsum convallis quis ac lectus. lac inia eget
                        consectetur sed, convallis at tellus. Nulla porttitor accumsana tincidunt. Vestibulum ante ipsum
                        primis tempus.</p>
                    <ul class="social_section_1info">
                        <li>
                            <a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 col-sm-5 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Useful Links</h3>
                </div>
                <ul class="links">
                    <li>
                        <a href="about.html">About Our Company</a>
                    </li>
                    <li>
                        <a href="services.html">Logistics Services</a>
                    </li>
                    <li>
                        <a href="#">Terms & Conditions</a>
                    </li>
                    <li>
                        <a href="#">Privicy Policy</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-7 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Subscribe</h3>
                </div>
                <div class="footer-text">
                    <p>By subscribing to our mailing list you will get latest news and updates from us.</p>
                    <form action="#" method="post">
                        <input type="email" name="Email" placeholder="Enter your email..." required="">
                        <button class="btn1"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- move top -->
        <div class="move-to-top text-center">
            <a href="#home" class="move-top"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
        </div>
        <!-- //move top -->
        <div class="copyright">
            <p>© 2019 Logistic. All Rights Reserved | Design by
                <a href="http://w3layouts.com/">W3layouts</a>
            </p>
        </div>
    </div>
</div>
<!-- //footer -->
<script src="${pageContext.request.contextPath}/front/js/fastLogin.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/ipLocation.js" type="text/javascript"></script>
<script>
    const webServKey = "2fddcdbc01f779d6382b8439a7279f3e";
    // 地址提示
    let sendAutocomplete;
    let receiveAutocomplete;

</script>
<script>
    $(function () {
        if ("${sessionScope.user.userId}" !== '') {
            loginUser = {};
            loginUser.userId = "${sessionScope.user.userId}";
            loginUser.userName = "${sessionScope.user.userName}";
            loginUser.userFace = "${sessionScope.user.userFace}";
            loginUser.uaerPhone = "${sessionScope.user.userPhone}";
        }
        // 地址提示实例化
        sendAutocomplete = new AMap.Autocomplete({
            input: "sendAddressDetail"
        });
        receiveAutocomplete = new AMap.Autocomplete({
            input: "receiveAddressDetail"
        });
        // 添加地址提示select监听器
        AMap.event.addListener(receiveAutocomplete, 'select', function (e) {
            //逆地理编码
            let regeo1 = regeo(e.poi.location.lng, e.poi.location.lat);
            let param2;
            if (regeo1.city === '' || regeo1.city === undefined || regeo1.city.length === 0) {
                param2 = regeo1.province;
            } else {
                param2 = regeo1.city;
            }

            if (regeo1.district === '' || regeo1.district === undefined || regeo1.district.length === 0) {
                fillReceiveAddress(regeo1.province, param2, regeo1.township, e.poi.location.lng, e.poi.location.lat, e.poi.adcode, regeo1.citycode);
            } else {
                fillReceiveAddress(regeo1.province, param2, regeo1.district, e.poi.location.lng, e.poi.location.lat, e.poi.adcode, regeo1.citycode);
            }
        })
        // 添加地址提示select监听器
        AMap.event.addListener(sendAutocomplete, 'select', function (e) {
            //逆地理编码
            let regeo1 = regeo(e.poi.location.lng, e.poi.location.lat);
            let param2;
            //直辖市 city == province
            if (regeo1.city === '' || regeo1.city === undefined || regeo1.city.length === 0) {
                param2 = regeo1.province;
            } else {
                param2 = regeo1.city;
            }
            // 判断三级行政区为区还是镇
            if (regeo1.district === '' || regeo1.district === undefined || regeo1.district.length === 0) {
                fillSendAddress(regeo1.province, param2, regeo1.township, e.poi.location.lng, e.poi.location.lat, e.poi.adcode, regeo1.citycode);
            } else {
                fillSendAddress(regeo1.province, param2, regeo1.district, e.poi.location.lng, e.poi.location.lat, e.poi.adcode, regeo1.citycode);
            }
        })
        // 加载layui模块
        layui.use(['layer', 'form'], function () {
            layer = layui.layer;
            form = layui.form;
            // 监听寄件信息表单提交
            form.on('submit(sendFormSubmit)', function (data) {
                // console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                toStep2();
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            // 监听收件信息表单提交
            form.on('submit(receiveFormSubmit)', function (data) {
                // console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                // 获取终点仓库Id
                let endHouse = getEndHouse(data.field);
                form.val('commentForm', {
                    'endHouseId': endHouse.houseId
                })
                toStep3();
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            // 监听备注信息表单提交
            form.on('submit(commentFormSubmit)', function (data) {
                // console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                toStep4();
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            // 监听确认按钮提交
            form.on('submit(confirmSubmit)', function (data) {
                // console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                let sVal = form.val('sendForm');
                let rVal = form.val('receiveForm');
                let cVal = form.val('commentForm');
                let allFormInfo = $.extend({}, sVal, rVal, cVal);
                layer.open({
                    title: false,
                    closeBtn: false,
                    content: '<div class="container"><h5 class="text-center">确认提交？</h5></div>',
                    skin: 'confirm-skin',
                    btnAlign: 'c',
                    move: false,
                    btn: ['是', '否'],
                    yes: function (index, layero) {
                        console.log(allFormInfo);
                        submitOrder(allFormInfo);
                        layer.close(layer.index);
                    },
                    btn2: function (index, layero) {
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
        detectLocation();
        // 检测登陆
        detectLogin();
    })
    $(document).on('mouseover', '.fa-user-circle-o', function () {
        $(this).removeClass('fa-user-circle-o');
        $(this).addClass('fa-user-circle');
    })
    $(document).on('mouseout', '.fa-user-circle', function () {
        $(this).removeClass('fa-user-circle');
        $(this).addClass('fa-user-circle-o');
    })
    // 提交订单
    function submitOrder(allFormInfo) {
        let url = '/order/addOrder?';
        let count = 0;
        for (var key in allFormInfo) {
            console.log(key + ':' + allFormInfo[key]);
            if (count === 0) {
                url += key + '=' + allFormInfo[key];
            } else {
                url += '&' + key + '=' + allFormInfo[key];
            }
            count++;
        }
        location.href = url;
    }

    // IP定位
    function selfLocation() {
        geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
                // console.log(result)
                fillSendAddress(result.addressComponent.province, result.addressComponent.city, result.addressComponent.district, result.position.lng, result.position.lat, result.addressComponent.adcode, result.addressComponent.citycode);
                //锁定查找城市区域
                sendAutocomplete.setCity(result.addressComponent.adcode);
                // lockCity(result.addressComponent.citycode)
            } else {
                layer.msg("定位服务器开小差了！")
            }
        });
    }

    // 锁定位置
    function lockCity(adCode) {
        sendAutocomplete.setCity(adCode);
        sendAutocomplete.setCityLimit(true);
    }

    // 逆地理编码请求
    function regeo(lng, lat) {
        let regeo;
        //逆地理编码
        $.ajax({
            type: "get",
            url: "https://restapi.amap.com/v3/geocode/regeo",
            async: false,
            data: {
                key: webServKey,
                location: lng + ',' + lat
            },
            success: function (data) {
                regeo = data.regeocode.addressComponent;
            },
            error: function () {
                layer.msg("定位服务出错了");
            }
        });
        return regeo;
    }

    // 填充寄件隐藏域
    function fillSendAddress(province, city, district, lng, lat, adCode, cityCode) {
        form.val("sendForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "sendCity": city,
            "sendProvince": province,
            "sendDistrict": district,
            "sendLng": lng,
            "sendLat": lat,
            "sendAdCode": adCode,
            "sendCityCode": cityCode,
        });
        $('#sendAddress').val(province + '-' + city + '-' + district);
    }

    // 填充收件隐藏域
    function fillReceiveAddress(province, city, district, lng, lat, adCode, cityCode) {
        form.val("receiveForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "receiveCity": city,
            "receiveProvince": province,
            "receiveDistrict": district,
            "receiveLng": lng,
            "receiveLat": lat,
            "receiveAdCode": adCode,
            "receiveCityCode": cityCode,
        });
        $('#receiveAddress').val(province + '-' + city + '-' + district);
    }

    // 切换至步骤1
    function toStep1() {
        $('section.footer-top').css('margin-top', 700);
        $('#step2').hide();
        $('#step1').show();
    }

    // 切换至步骤2
    function toStep2() {
        $('section.footer-top').css('margin-top', $('#step2').height() + 150);
        $('#step1').hide();
        $('#step3').hide();
        $('#step2').show();
    }

    // 切换至步骤3
    function toStep3() {
        $('section.footer-top').css('margin-top', $('#step3').height() + 150);
        $('#typeSelect').empty();
        $.ajax({
            type: "get",
            url: "/type/getAllType",
            async: true,
            success: function (data) {
                $.each(data, function () {
                    let content = ' <option value="' + this.typeId + '">' + this.typeName + '</option>'
                    $('#typeSelect').append(content);
                });
                form.render('select', 'commentForm');
            },
            error: function () {
                layer.msg("获取数据失败，请返回再次进入步骤重试");
            }
        });

        $('#step4').hide();
        $('#step2').hide();
        $('#step3').show();
    }

    // 切换至步骤4
    function toStep4() {
        $('section.footer-top').css('margin-top', $('#step4').height() + 150);
        $('#step3').hide();
        $('#step4').show();
        getOrderDetail();
    }

    // 渲染完整的订单信息
    function getOrderDetail() {
        let sendCard = $('#sendDetailCard .card-body');
        let receiveCard = $('#receiveDetailCard .card-body');
        let commentCard = $('#commentCard .card-body');
        let sVal = form.val('sendForm');
        let rVal = form.val('receiveForm');
        let cVal = form.val('commentForm');
        sendCard.empty();
        let sContent = '' +
            '<div><strong>姓名：</strong>' + sVal.sendName + '</div>' +
            '<div><strong>电话：</strong>' + sVal.sendPhone + '</div>' +
            '<div><strong>出发：</strong>' + sVal.sendProvince + ' ' + sVal.sendCity + ' ' + sVal.sendDistrict + '</div>' +
            '<div><strong>详细地址：</strong>' + (sVal.sendAddressDetail + '  ' + sVal.sendCompanyName).trim() + '</div>';
        sendCard.append(sContent);
        receiveCard.empty();
        let rContent = '' +
            '<div><strong>姓名：</strong>' + rVal.receiveName + '</div>' +
            '<div><strong>电话：</strong>' + rVal.receivePhone + '</div>' +
            '<div><strong>发往：</strong>' + rVal.receiveProvince + ' ' + rVal.receiveCity + ' ' + rVal.receiveDistrict + '</div>' +
            '<div><strong>详细地址：</strong>' + (rVal.receiveAddressDetail + '  ' + rVal.receiveCompanyName).trim() + '</div>';
        receiveCard.append(rContent);
        commentCard.empty();
        let typeInfo = {};
        let cContent = '';
        $.ajax({
            type: "get",
            url: "/type/getTypeByParam",
            async: false,
            data: {
                'typeId': cVal.typeSelect
            },
            dataType: 'json',
            success: function (data) {

                typeInfo = data;
            },
            error: function () {
                layer.msg('获取订单数据失败。');
            }
        });
        cContent += '<div><strong>包裹类型：' + typeInfo.typeName + '</strong></div>';
        cContent += '<div><strong>备注：' + cVal.orderComment + '</strong></div>';
        let p1 = [sVal.sendLng, sVal.sendLat];
        let p2 = [rVal.receiveLng, rVal.receiveLat];

        // 计算邮寄价格和条件
        let calculatePrice1 = calculatePrice(typeInfo, parseFloat(cVal.weight), p1, p2);
        if (calculatePrice1 === 'unSendAble') {
            cContent += '<div class="d-flex"><strong class="ml-auto"><span class="text-danger">货物已超重,请适当减轻重量或拆分为多个包裹进行邮寄。</span></strong></div>';

        } else {
            form.val("commentForm", {
                "cost": calculatePrice1,
            });
            cContent += '<div class="d-flex"><strong class="ml-auto">价格（具体价格以快递员称重结果为准）：' + calculatePrice1 + '元</strong></div>';
        }
        commentCard.append(cContent);
    }

    // 根据收件信息判断终点仓库
    function getEndHouse(receiveInfo) {
        let receivePlace = [parseFloat(receiveInfo.receiveLng), parseFloat(receiveInfo.receiveLat)];
        let receiveAdCode = receiveInfo.receiveAdCode;
        let distance;
        let endHouse;
        $.ajax({
            type: "get",
            url: "/house/getHouseByCityCode",
            async: false,
            dataType: 'json',
            data: {
                receiveCityCode: receiveInfo.receiveCityCode
            },
            success: function (data) {
                $.each(data, function (index) {
                    let endHouseLocation = [this.address.lng, this.address.lat];
                    if (index === 0) {
                        distance = AMap.GeometryUtil.distance(receivePlace, endHouseLocation);
                        endHouse = this;
                    } else if (distance > AMap.GeometryUtil.distance(receivePlace, endHouseLocation)) {
                        distance = AMap.GeometryUtil.distance(receivePlace, endHouseLocation);
                        endHouse = this;
                    }
                    if (this.address.adCode === receiveAdCode) {
                        endHouse = this;
                        return false;
                    }
                })
            }, error: function () {
                layer.msg("获取信息失败，请稍后再试。")
            }
        });
        return endHouse;
    }

    // 计算价格
    function calculatePrice(typeInfo, weight, p1, p2) {
        let dis = parseInt(AMap.GeometryUtil.distance(p1, p2) / 1000);
        let times = 1;
        let price;
        let basePrice = typeInfo.basePrice;
        let baseWeight = typeInfo.baseWeight;
        let overWeightLimit = typeInfo.overWeightLimit;
        let overWeightStep = typeInfo.overWeightStep;
        let weightLimit = typeInfo.weightLimit;
        let weightStep = typeInfo.weightStep;
        if (dis >= 1000) {
            times = Math.floor(dis / 100) / 10;
        }
        if (weight <= baseWeight) {
            price = basePrice;
        } else if (weight > baseWeight && weight <= overWeightLimit) {
            price = basePrice + (weight - baseWeight) * weightStep;
        } else if (weight > overWeightLimit && weight <= weightLimit) {
            price = basePrice + (overWeightLimit - baseWeight) * weightStep + (weight - overWeightLimit) * overWeightStep;
        } else {
            return 'unSendAble';
        }
        return Math.ceil(price * times);
    }

    //使用地址簿
    function useAddressInfo() {
        if ('${sessionScope.User.userId}' === '') {
            doFastLogin();
        }
    }

</script>
</body>
</html>